<template>
  <div class="layout">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-left">
        <h1>智慧医疗系统</h1>
      </div>
      <div class="header-right">
        <span class="username">欢迎，{{ username }}</span>
        <button @click="handleLogout" class="logout-button">退出登录</button>
      </div>
    </header>

    <!-- 主体内容区域 -->
    <div class="main-content">
      <!-- 左侧菜单 -->
      <aside class="sidebar">
        <div class="menu">
          <!-- 订单管理 -->
          <div class="menu-item">
            <div class="menu-title" @click="toggleMenu('order')">
              <i class="icon">📁</i>
              <span>订单管理</span>
              <i class="arrow" :class="{ 'expanded': expandedMenus.order }">▶</i>
            </div>
            <div class="submenu" v-show="expandedMenus.order">
              <!-- 退款申请 -->
              <div class="submenu-item">
                <div class="submenu-title" @click="handleMenuClick('refund')">
                  <i class="icon">📄</i>
                  <span>退款申请</span>
                  <i class="arrow" :class="{ 'expanded': expandedSubmenus.refund }">▶</i>
                </div>
                <div class="sub-submenu" v-show="expandedSubmenus.refund">
                  <div class="sub-submenu-item" @click="selectMenuItem('refund-pending')">退款详情-待处理</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('refund-processed')">退款详情-已处理</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('refund-rejected')">退款详情-已拒绝</div>
                </div>
              </div>

              <!-- 药品订单管理 -->
              <div class="submenu-item">
                <div class="submenu-title" @click="handleMenuClick('drug')">
                  <i class="icon">📄</i>
                  <span>药品订单管理</span>
                  <i class="arrow" :class="{ 'expanded': expandedSubmenus.drug }">▶</i>
                </div>
                <div class="sub-submenu" v-show="expandedSubmenus.drug">
                  <div class="sub-submenu-item" @click="selectMenuItem('drug-shipping')">订单详情-待发货</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('drug-receiving')">订单详情-待收货</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('drug-received')">订单详情-已收货</div>
                </div>
              </div>

              <!-- 处方流转订单管理 -->
              <div class="submenu-item">
                <div class="submenu-title" @click="handleMenuClick('prescription')">
                  <i class="icon">📄</i>
                  <span>处方流转订单管理</span>
                  <i class="arrow" :class="{ 'expanded': expandedSubmenus.prescription }">▶</i>
                </div>
                <div class="sub-submenu" v-show="expandedSubmenus.prescription">
                  <div class="sub-submenu-item" @click="selectMenuItem('prescription-payment')">订单详情-待支付</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('prescription-approved')">订单详情-已核准发药</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('prescription-invalid')">订单详情-已失效</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('prescription-not-approved')">订单详情-未核准发药</div>
                </div>
              </div>

              <!-- 问诊单管理 -->
              <div class="submenu-item">
                <div class="submenu-title" @click="handleMenuClick('consultation')">
                  <i class="icon">📄</i>
                  <span>问诊单管理</span>
                  <i class="arrow" :class="{ 'expanded': expandedSubmenus.consultation }">▶</i>
                </div>
                <div class="sub-submenu" v-show="expandedSubmenus.consultation">
                  <div class="sub-submenu-item" @click="selectMenuItem('consultation-pending')">问诊单详情-待确认</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('consultation-confirmed')">问诊单详情-已确认</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('consultation-completed')">问诊单详情-已完成</div>
                  <div class="sub-submenu-item" @click="selectMenuItem('consultation-cancelled')">问诊单详情-已取消</div>
                </div>
              </div>

              <!-- 挂号单管理 -->
              <div class="submenu-item">
                <div class="submenu-title" @click="selectMenuItem('registration-management')">
                  <i class="icon">📄</i>
                  <span>挂号单管理</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 智慧医疗RAG系统 -->
          <div class="menu-item">
            <div class="menu-title" @click="toggleMenu('smartRag')">
              <i class="icon">🤖</i>
              <span>智慧医疗RAG系统</span>
              <i class="arrow" :class="{ 'expanded': expandedMenus.smartRag }">▶</i>
            </div>
            <div class="submenu" v-show="expandedMenus.smartRag">
              <div class="submenu-item">
                <div class="submenu-title" @click="selectMenuItem('smart-medical-rag')">
                  <i class="icon">🏥</i>
                  <span>RAG辅助分诊</span>
                </div>
              </div>
              <div class="submenu-item">
                <div class="submenu-title" @click="selectMenuItem('test-smart-medical-rag')">
                  <i class="icon">🧪</i>
                  <span>功能测试页面</span>
                </div>
              </div>
              <div class="submenu-item">
                <div class="submenu-title" @click="selectMenuItem('test-backend-connection')">
                  <i class="icon">🔗</i>
                  <span>后端连接测试</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>

      <!-- 右侧内容区域 -->
      <main class="content">
        <RouterView v-slot="{ Component }">
          <component :is="Component" v-if="Component" />
          <div v-else class="welcome-content">
            <div class="welcome-message">
              <h3>欢迎使用智慧医疗系统</h3>
              <p>请从左侧菜单选择要管理的功能模块</p>
            </div>
          </div>
        </RouterView>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 用户名
const username = ref('admin');

// 菜单展开状态
const expandedMenus = reactive({
  order: true,
  smartRag: false
});

const expandedSubmenus = reactive({
  refund: false,
  drug: false,
  prescription: true,
  consultation: false
});

// 切换主菜单
const toggleMenu = (menuKey: string) => {
  expandedMenus[menuKey as keyof typeof expandedMenus] = !expandedMenus[menuKey as keyof typeof expandedMenus];
};

// 处理菜单点击 - 跳转到对应页面
const handleMenuClick = (menuKey: string) => {
  // 切换子菜单展开状态
  expandedSubmenus[menuKey as keyof typeof expandedSubmenus] = !expandedSubmenus[menuKey as keyof typeof expandedSubmenus];
  
  // 根据菜单类型跳转到对应页面
  switch (menuKey) {
    case 'refund':
      router.push('/refund-application');
      break;
    case 'drug':
      router.push('/drug-order-management');
      break;
    case 'prescription':
      router.push('/prescription-order-management');
      break;
    case 'consultation':
      router.push('/consultation-order-management');
      break;
  }
};

// 选择菜单项
const selectMenuItem = (itemKey: string) => {
  // 根据选择的菜单项跳转到对应页面
  switch (itemKey) {
    case 'refund-pending':
      router.push('/refund-detail-pending');
      break;
    case 'refund-processed':
      router.push('/refund-detail-processed');
      break;
    case 'refund-rejected':
      router.push('/refund-detail-rejected');
      break;
    case 'drug-shipping':
      router.push('/drug-detail-shipping');
      break;
    case 'drug-receiving':
      router.push('/drug-detail-receiving');
      break;
    case 'drug-received':
      router.push('/drug-detail-received');
      break;
    case 'prescription-payment':
      router.push('/order-detail-to-be-paid');
      break;
    case 'prescription-approved':
      router.push('/order-detail-approved-for-dispensing');
      break;
    case 'prescription-invalid':
      router.push('/order-detail-expired');
      break;
    case 'prescription-not-approved':
      router.push('/order-detail-not-approved-for-dispensing');
      break;
    case 'consultation-pending':
      router.push('/consultation-detail-pending');
      break;
    case 'consultation-confirmed':
      router.push('/consultation-detail-confirmed');
      break;
    case 'consultation-completed':
      router.push('/consultation-detail-completed');
      break;
    case 'consultation-cancelled':
      router.push('/consultation-detail-cancelled');
      break;
    case 'registration-management':
      router.push('/registration-order-management');
      break;

    case 'smart-medical-rag':
      router.push('/smart-medical-rag');
      break;
     case 'test-smart-medical-rag':
       router.push('/test-smart-medical-rag');
       break;
    // 其他菜单项的路由可以在这里添加
    default:
      console.log('菜单项:', itemKey);
      break;
  }
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token');
  router.push('/Login');
};

// 组件挂载时获取用户信息
onMounted(() => {
  const savedUsername = localStorage.getItem('username');
  if (savedUsername) {
    username.value = savedUsername;
  }
});
</script>

<style scoped>
.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 1600px;
  width: 100%;
}

.header {
  height: 90px;
  background-color: #1890ff;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.username {
  font-size: 18px;
  font-weight: 500;
}

.logout-button {
  padding: 12px 24px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.logout-button:hover {
  background-color: #ff7875;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 500px;
  background-color: #f5f5f5;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
  min-width: 500px;
}

.menu {
  padding: 25px 0;
}

.menu-item {
  margin-bottom: 15px;
}

.menu-title {
  display: flex;
  align-items: center;
  padding: 20px 35px;
  cursor: pointer;
  background-color: #e6f7ff;
  border-right: 3px solid #1890ff;
  font-weight: 500;
  font-size: 18px;
}

.menu-title:hover {
  background-color: #bae7ff;
}

.menu-title .icon {
  margin-right: 10px;
  font-size: 18px;
}

.menu-title .arrow {
  margin-left: auto;
  font-size: 16px;
  transition: transform 0.3s ease;
  color: #666;
}

.menu-title .arrow.expanded {
  transform: rotate(90deg);
  color: #1890ff;
}

.submenu {
  background-color: white;
  transition: all 0.3s ease;
  overflow: hidden;
}

.submenu-item {
  border-bottom: 1px solid #f0f0f0;
}

.submenu-title {
  display: flex;
  align-items: center;
  padding: 18px 35px 18px 60px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  border-radius: 4px;
  margin: 2px 10px;
}

.submenu-title:hover {
  background-color: #f0f8ff;
  color: #1890ff;
}

.submenu-title:hover .arrow {
  color: #1890ff;
}

.submenu-title .icon {
  margin-right: 10px;
  font-size: 16px;
}

.submenu-title .arrow {
  margin-left: auto;
  font-size: 14px;
  transition: transform 0.3s ease;
  color: #666;
}

.submenu-title .arrow.expanded {
  transform: rotate(90deg);
  color: #1890ff;
}

.sub-submenu {
  background-color: #fafafa;
  transition: all 0.3s ease;
  overflow: hidden;
}

.sub-submenu-item {
  padding: 15px 35px 15px 85px;
  cursor: pointer;
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  transition: all 0.3s ease;
  border-radius: 4px;
  margin: 2px 10px;
}

.sub-submenu-item:hover {
  background-color: #e6f7ff;
  color: #1890ff;
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.sub-submenu-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-right: 3px solid #1890ff;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  min-width: 1000px;
  width: 100%;
}

.welcome-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px 60px 120px;
}

.welcome-message {
  text-align: left;
  padding: 150px 0 150px 0;
  color: #666;
  max-width: 1200px;
  margin: 0;
}

.welcome-message h3 {
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.welcome-message p {
  font-size: 18px;
  line-height: 1.8;
}

/* 响应式设计 */
@media (min-width: 1920px) {
  .layout {
    min-width: 1800px;
  }
  
  .sidebar {
    width: 550px;
    min-width: 550px;
  }
  
  .content {
    min-width: 1200px;
  }
  
  .header {
    padding: 0 100px;
  }
  
  .welcome-content {
    padding: 80px 100px 80px 140px;
  }
}

@media (max-width: 1600px) {
  .layout {
    min-width: 1400px;
  }
  
  .sidebar {
    width: 450px;
    min-width: 450px;
  }
  
  .content {
    min-width: 900px;
  }
}
</style> 